<template>
  <div class="dashboard-container">
    <el-card class="box-card perce">
      <div slot="header" class="clearfix">
        <span>基本状态</span>
      </div>
      <el-row class="text item">
        <el-col :span="6">
          <div v-show="basic.state==0" class="dashboard-text">
            状态:<el-tag size="medium" type="success">正常</el-tag>
          </div>
          <div v-show="basic.state==1" class="dashboard-text">
            状态:<el-tag size="large" type="danger">被封禁</el-tag>,请联系管理员
          </div>
        </el-col>
        <el-col v-if="basic.state==0" :span="6">
          <div v-show="basic.unset==0||basic.unset==undefined" class="dashboard-text">
            密码状态:<el-tag size="medium" type="success">正常</el-tag>
          </div>
          <div v-show="basic.unset==1" class="dashboard-text">
            密码状态:<el-tag size="large" type="danger">重置登录</el-tag>,请及时修改
          </div>
        </el-col>
        <el-col v-if="basic.state==0" :span="6">
          <div v-show="role==0" class="dashboard-text">
            清洗次数:{{ basic.clean }}  <el-button v-if="basic.clean > -1" type="primary" @click="moreNum('clean')">申请次数</el-button>
          </div>
        </el-col>
        <el-col v-if="basic.state==0" :span="6">
          <div v-show="role==0" class="dashboard-text">
            分析次数:{{ basic.analyze }} <el-button v-if="basic.analyze > -1" type="primary" @click="moreNum('analyze')">申请次数</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-row v-if="role!=0 && basic.state==0">
      <el-col :span="12">
        <el-card class="box-card perce">
          <div slot="header" class="clearfix">
            <span>重置密码申请</span>
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="12">
                <el-result :sub-title="`您有${unsetNum}个申请等待处理中`" icon="info" title="待处理请求">
                  <template slot="extra">
                    <el-button v-show="unsetNum!=0" type="primary" size="medium" @click.prevent="dealUnset">点击处理</el-button>
                  </template>
                </el-result>
              </el-col>
              <el-col :span="12">
                <el-statistic :value="unsetHistory" group-separator="," title="历史已处理请求">
                  <template slot="prefix">
                    <i class="el-icon-s-flag" style="color: red"/>
                  </template>
                  <template slot="suffix">
                    <i class="el-icon-s-flag" style="color: blue"/>
                  </template>
                </el-statistic>
              </el-col>
            </el-row>

          </div>
        </el-card>
      </el-col>
      <el-col v-if="role===1" :span="12">
        <el-card class="box-card perce">
          <div slot="header" class="clearfix">
            <span>次数增加申请</span>
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="12">
                <el-result :sub-title="`您有${applyNum}个申请等待处理中`" icon="info" title="待处理请求">
                  <template slot="extra">
                    <el-button v-show="applyNum!=0" type="primary" size="medium" @click.prevent="dealApply">点击处理</el-button>
                  </template>
                </el-result>
              </el-col>
              <el-col :span="12">
                <el-statistic :value="applyHistory" group-separator="," title="历史已处理请求">
                  <template slot="prefix">
                    <i class="el-icon-s-flag" style="color: red"/>
                  </template>
                  <template slot="suffix">
                    <i class="el-icon-s-flag" style="color: blue"/>
                  </template>
                </el-statistic>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card v-if="basic.state==0" class="box-card perce">
      <div slot="header" class="clearfix">
        <span>未读消息</span>
      </div>
      <div class="text item">
        <el-result v-show="list==null||list==undefined||list.length==0" icon="success" title="没有未读消息" sub-title="您处理了所有消息"/>
        <div v-show="list!=null&&list!=undefined&&list.length>0">
          <div v-for=" (o,index) in list" :key="index">
            <el-tag v-show="o.state === 1" type="success">成功</el-tag>
            <el-tag v-show="o.state === -1" type="danger">失败</el-tag> {o.descption}
          </div>
        </div>
    </div></el-card>
  </div>
</template>

<script>
import Admin from '@/api/admin'
import Apply from '@/api/apply'
import Notify from '@/api/notify'

export default {
  name: 'Dashboard',
  data() {
    return {
      role: this.$store.getters.roles,
      basic: {
        name: '',
        email: '',
        roles: '',
        clean: '',
        analyze: '',
        state: 0
      },
      unsetNum: 0,
      applyNum: 0,
      unsetHistory: 0,
      applyHistory: 0,
      list: []
    }
  },
  watch: { // 监听
    $route(to, from) {
      this.init()
    }
  },
  created() { // 页面渲染之前执行
    this.init()
  },
  methods: {
    init() {
      const id = this.$store.getters.token
      const state = this.$store.getters.power
      const unset = this.$store.getters.avatar
      this.getUserInfo(id)
      this.getinfo()
    },
    getUserInfo(id) {
      Admin.getInfo(id)
        .then(response => {
          // this.admin = response.data
          this.basic = response.data
        })
    },
    getinfo() {
      Notify.getInfo().then(response => {
        if (response.success) {
          this.list = response.data.list
          this.unsetNum = response.data.unset
          this.unsetHistory = response.data.unsetHistory
          if (this.role === 1) {
            this.applyNum = response.data.num
            this.applyHistory = response.data.numHistory
          }
        }
      }).catch(() => { })
    },
    moreNum(type) {
      this.$prompt('请输入申请数量', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[1-9]\d*/,
        inputErrorMessage: '只能输入正整数'
      }).then(({ value }) => {
        if (type === 'clean') {
          Apply.addClean(value).then(response => {
            this.$message({
              showClose: true,
              message: '请求成功，请等待管理员审核',
              type: 'success'
            })
          })
        } else if (type === 'analyze') {
          Apply.addAnalyze(value).then(response => {
            this.$message({
              showClose: true,
              message: '请求成功，请等待管理员审核',
              type: 'success'
            })
          })
        }
      }).catch(() => { })
    },
    dealUnset() {
      this.$router.push({ path: '/user/applay/password' })
    },
    dealApply() {
      this.$router.push({ path: '/user/applay/num' })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 20px;
  }

  &-text {
    font-size: 20px;
    line-height: 23px;
  }
}
</style>
